﻿
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/png" href="../../Assets/Image/icon.png">
    <title>QuarkDoc</title>
    <!--     Fonts and icons     -->
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
    <!-- CSS Files -->
    <link href="~/Assets/Style/material-dashboard.min.css" rel="stylesheet" />
    <script src="~/Assets/Script/core/vue.js"></script>
    <link href="~/Assets/Style/wangEditor.min.css" rel="stylesheet" />
</head>
<body>
    <input type="hidden" id="pcode" value="@ViewData["pcode"]" />
    <input type="hidden" id="code" value="@ViewData["code"]" />
    <div class="wrapper ">
        <div style="padding-bottom:30px;">
            <div class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
                <div class="">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="/Home">
                                <i class="material-icons">dashboard</i>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link"  href="/Document?pcode=@ViewData["pcode"]">
                                <i class="material-icons">code</i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
        <style type="text/css">
            .toolbar {
                border: 1px solid #ccc;
            }

            .text {
                border: 1px solid #ccc;
                height: 850px;
            }
        </style>
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body ">
                                <div class="row">
                                    <div class="col-sm-10" id="documentDiv">
                                        <div class="card-header ">
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <label class="col-form-label">标题</label>
                                                    <div class="has-default">
                                                        <input id="title" type="text" class="form-control">
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <label class="col-form-label">二级目录</label>
                                                    <div class="has-default">
                                                        <select id="parentDirectoryId" name="parentDirectoryId" v-on:change="getChildren($event)" class="btn btn-sm btn-link col-12">
                                                            <option value="0" selected>无目录</option>
                                                            <option v-if="withDir.DirectoryId=='0'" v-for="withDir in directories" v-bind:value="withDir.Id">{{withDir.Title}}</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <label class="col-form-label">三级目录</label>
                                                    <div class="has-default">
                                                        <select id="childrenDirectoryId" name="childrenDirectoryId" class="btn btn-sm btn-link col-12">
                                                            <option value="0" selected>可选</option>
                                                            <
                                                            <option v-for="towLiveDoc in towLiveDirectories" v-bind:value="towLiveDoc.Id">{{towLiveDoc.Title}}</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <label class="col-form-label">序号</label>
                                                    <div class="has-default">
                                                        <input id="sort" type="text" class="form-control">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-header">

                                            <div style="width:100%;height:900px;">

                                                <div id="container">
                                                    <div id="toolbar" class="toolbar">
                                                    </div>
                                                    <div id="text" class="text">
                                                        <!--可使用 min-height 实现编辑区域自动增加高度-->
                                                        <p>请输入内容</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <ul class="nav nav-pills  nav-pills-icons flex-column">
                                            <li class="nav-item">
                                                <a class="nav-link" onclick="DocumentEdit()" id="btn1" href="javascript:void(0)">
                                                    <i class="material-icons">check</i> 保存
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" href="javascript:void(0)">
                                                    <i class="material-icons">bookmark</i> 另存模板
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" href="javascript:void(0)">
                                                    <i class="material-icons">palette</i> 模板
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link " href="javascript:void(0)">
                                                    <i class="material-icons">schedule</i> 历史版本
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link " target="_blank" href="/Default/HttpSimulate" >
                                                    <i class="material-icons">tv</i> HTTP模拟
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" target="_blank" href="/Default/JsonFormatting" >
                                                    <i class="material-icons">list</i> JSON格式化
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" target="_blank" href="/Default/JsonToURL">
                                                    <i class="material-icons">list</i> JSON转URL
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>


                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Classic Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">新建目录</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <i class="material-icons">clear</i>
                    </button>
                </div>
                <form id="NewDirectoriesForm" method="post" action="">
                    <div class="modal-body">
                        <p>
                            序号:(可选)默认是99，数字越小越靠前。
                        </p>
                        <div class="form-group bmd-form-group is-filled">
                            <div class="card-body ">
                                <div class="form-group">
                                    <label for="projectName" class="bmd-label-floating"> 目录名 *</label>
                                    <input type="text" class="form-control" id="directoryName" name="directoryName" required="true" maxlength="20">
                                </div>
                                <div class="form-group">
                                    <label for="description" class="bmd-label-floating"> 序号</label>
                                    <input type="text" class="form-control" id="sort" name="sort" maxlength="5">
                                </div>
                                <div class="form-group">
                                    <select id="directoryId" name="directoryId" class="selectpicker col-md-12" data-size="10" data-style="btn btn-primary btn-round" title="Single Select">
                                        <option value="0" selected>无目录</option>
                                    </select>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-link">Lets Go</button>
                        <button type="button" class="btn btn-danger btn-link" data-dismiss="modal">Close</button>
                    </div>
                </form>

            </div>
        </div>
    </div>
    <!--  End Modal -->
    <!--   Core JS Files   -->

    <script src="~/Assets/Script/core/jquery.min.js" type="text/javascript"></script>
    <script src="~/Assets/Script/core/popper.min.js" type="text/javascript"></script>
    <script src="~/Assets/Script/core/bootstrap-material-design.min.js" type="text/javascript"></script>
    <script src="~/Assets/Script/plugins/perfect-scrollbar.jquery.min.js"></script>
    <!--  Plugin for Sweet Alert -->
    <script src="~/Assets/Script/plugins/sweetalert2.js"></script>
    <script src="~/Assets/Script/plugins/bootstrap-notify.js"></script>
    <!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
    <script src="~/Assets/Script/material-dashboard.min.js" type="text/javascript"></script>
    <script src="~/Assets/Script/QDocFramework.js"></script>
    <script src="~/Assets/Script/core/wangEditor.min.js"></script>
    <script src="~/Assets/Script/core/xss.js"></script>
    <script type="text/javascript">

        var editor;
        var vueObj = new Vue({
            el: '#documentDiv',
            data: {
                directories: [], towLiveDirectories: []
            }, methods: {
                push: function () {
                    var slft = this;
                    this.$nextTick(function () {
                        //数据已经更新
                    });
                    this.$nextTick(function () {
                        //v-for已渲染完成
                        var code = $("#code").val();
                        if (code != "null") {
                            $.ajax({
                                type: "POST",
                                url: "/Document/FindDocument",
                                data: { code: code },
                                success: function (result) {
                                    var parentId = result.parentDocumentId;
                                    var childrenId = result.documents.DirectoryId;
                                    $("#parentDirectoryId").val(parentId);
                                    this.towLiveDirectories = [];
                                    if (parentId != '0') {
                                        for (var val of slft.directories) {
                                            if (parentId == val.DirectoryId) {
                                                slft.towLiveDirectories.push({ Id: val.Id, Title: val.Title })
                                            }
                                        }
                                        slft.$nextTick(function () {
                                            if (childrenId != '0')
                                                $("#childrenDirectoryId").val(childrenId);
                                        });
                                    }

                                    editor.txt.html(result.documents.Document);
                                    $("#sort").val(result.documents.Sort);
                                    $("#title").val(result.documents.Title);
                                }
                            });
                        }
                    })
                },
                Load: function () {
                    var slft = this;
                    var pcode = $("#pcode").val();
                    var code = $("#code").val();
                    $.ajax({
                        type: "POST",
                        url: "/Document/FindData",
                        data: { pcode: pcode, code: code },
                        success: function (result) {
                            slft.directories = result.directories;
                            slft.push();
                        }
                    });

                },
                getChildren: function (e) {
                    var id = e.currentTarget.value;
                    this.towLiveDirectories = [];
                    if (id != '0') {
                        for (var val of this.directories) {
                            if (id == val.DirectoryId) {
                                this.towLiveDirectories.push({ Id: val.Id, Title: val.Title })
                            }
                        }
                    }
                }
            }
        });
        $(document).ready(function () {
            vueObj.Load();
            // 创建编辑器
            var E = window.wangEditor
            editor = new E('#toolbar', '#text')  // 两个参数也可以传入 elem 对象，class 选择器
            editor.create()

        });
        function DocumentEdit() {
            var html = editor.txt.html()
            var filterHtml = html//filterXSS(html)
            var code = $("#code").val();
            var pcode = $("#pcode").val();
            var title = $("#title").val();
            var parentDirectoryId = $("#parentDirectoryId").val();
            var childrenDirectoryId = $("#childrenDirectoryId").val();
            var directoryId = '0';
            var sort = $("#sort").val();
            if (parentDirectoryId != '0') {
                if (childrenDirectoryId == '0') {
                    directoryId = parentDirectoryId;
                } else {
                    directoryId = childrenDirectoryId;
                }
            }
            $.ajax({
                type: "POST",
                url: "/Document/SaveDocument",
                data: { pcode: pcode, code: code, context: filterHtml, title: title, directoryId: directoryId, sort: sort },
                success: function (result) {
                    if (result == "True") {
                        $.notify({
                            // options
                            message: '保存成功!'
                        }, {
                                // settings
                                type: 'success'
                            });
                    } else {

                        $.notify({
                            // options
                            message: '保存失败!'
                        }, {
                                // settings
                                type: 'error'
                            });
                    }
                }
            });

        }

    </script>
</body>
</html>
